<template>
    <!-- Slider main container -->
    <div class="swiper">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <slot name="swiper"></slot>
      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>
    </div>

</template>

<script>
import Swiper from 'swiper/bundle'

// import styles bundle
import 'swiper/css/bundle'

export default {
  components: {

  },
  props: {
    loop: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {

    }
  },
  mounted () {
    new Swiper('.swiper', {
      loop: true,
      autoplay: true,

      // If we need pagination
      pagination: {
        el: '.swiper-pagination'
      }
    })
  }
}
</script>
<style lang="scss" scoped>

.swiper {
  width: 100%;
}
</style>
